<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">中国地图</div>
      <div class="sub_title">中国疫情地图</div>
      <slot name="title"></slot>
    </div>
    <div id="map_basic" style="width: 100%"></div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
import { DataView } from "@antv/data-set";
export default {
  data() {
    return {
      chart: null,
      dataList: [
        {
          name: "新疆维吾尔自治区",
          value: "2",
        },
        {
          name: "西藏自治区",
          value: "3",
        },
        {
          name: "内蒙古自治区",
          value: "31",
        },
        {
          name: "青海省",
          value: "12",
        },
        {
          name: "四川省",
          value: "31",
        },
        {
          name: "黑龙江省",
          value: "123",
        },
        {
          name: "甘肃省",
          value: "34",
        },
        {
          name: "云南省",
          value: "12",
        },
        {
          name: "广西壮族自治区",
          value: "34",
        },
        {
          name: "湖南省",
          value: "13",
        },
        {
          name: "陕西省",
          value: "341",
        },
        {
          name: "广东省",
          value: "132",
        },
        {
          name: "吉林省",
          value: "1113",
        },
        {
          name: "河北省",
          value: "2223",
        },
        {
          name: "湖北省",
          value: "3333",
        },
        {
          name: "贵州省",
          value: "3343",
        },
        {
          name: "山东省",
          value: "4443",
        },
        {
          name: "江西省",
          value: "5553",
        },
        {
          name: "河南省",
          value: "6663",
        },
        {
          name: "辽宁省",
          value: "7773",
        },
        {
          name: "山西省",
          value: "8883",
        },
        {
          name: "安徽省",
          value: "9993",
        },
        {
          name: "福建省",
          value: "11113",
        },
        {
          name: "浙江省",
          value: "12223",
        },
        {
          name: "江苏省",
          value: "0",
        },
        {
          name: "重庆市",
          value: "233",
        },
        {
          name: "宁夏回族自治区",
          value: "1213",
        },
        {
          name: "海南省",
          value: "2123",
        },
        {
          name: "台湾省",
          value: "231233",
        },
        {
          name: "北京市",
          value: "312",
        },
        {
          name: "天津市",
          value: "113",
        },
        {
          name: "上海市",
          value: "1213",
        },
        {
          name: "香港特别行政区",
          value: "2123",
        },
        {
          name: "澳门特别行政区",
          value: "11113",
        },
      ],
      colorSet:['#faf3f3','#f5bba7','#ee7263','#974236','#4e160f','#372a28','#222222']
    };
  },
  mounted() {
    const vm = this;
    this.chart = new Chart({
      // 指定图表容器 ID
      container: "map_basic",
      // 自适应宽度，容器伸缩会重新渲染图表
      autoFit: true,
      // 容器的高度
      height: 500,
      // 图表的外侧内边距
      padding: [40, 80, 80, 80],
    });
    // 自定义提示框
    this.chart.tooltip({
      showTitle: false,
      showMarkers: false,
      domStyles: {
        "g2-tooltip-list-item": {
          textAlign: "left",
        },
      },
    });
    // 设置图例位置
    this.chart.legend('trend', {
      position: 'left'
    });
    // 自定义 html 标注
    this.chart.annotation().html({
      html:`
      <div style=" width: 140px;border: 2px solid #c0c4cc;padding: 8px;border-radius: 10px;background-color: #c0c4cc;box-sizing: border-box;">
        <div style="font-weight: 600;">风险等级划分</div>
        <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 6px;"><span style="display:inline-block;width:20px;height:8px;background-color:${vm.colorSet[0]}; border-radius: 2px;"></span> <span>无风险地区</span> </div>
        <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 6px;"><span style="display:inline-block;width:20px;height:8px;background-color:${vm.colorSet[1]}; border-radius: 2px;"></span> <span>轻微风险地区</span> </div>
        <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 6px;"><span style="display:inline-block;width:20px;height:8px;background-color:${vm.colorSet[2]}; border-radius: 2px;"></span> <span>低风险地区</span> </div>
        <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 6px;"><span style="display:inline-block;width:20px;height:8px;background-color:${vm.colorSet[3]}; border-radius: 2px;"></span> <span>中风险地区</span> </div>
        <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 6px;"><span style="display:inline-block;width:20px;height:8px;background-color:${vm.colorSet[4]}; border-radius: 2px;"></span> <span>高风险地区</span> </div>
        <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 6px;"><span style="display:inline-block;width:20px;height:8px;background-color:${vm.colorSet[5]}; border-radius: 2px;"></span> <span>超高无风险地区</span> </div>
        <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 6px;"><span style="display:inline-block;width:20px;height:8px;background-color:${vm.colorSet[6]}; border-radius: 2px;"></span> <span>极度危险风险地区</span> </div>
      </div>
      `,
      offsetY:-130,
      offsetX:-20
    })
    fetch(
      "https://gw.alipayobjects.com/os/antvdemo/assets/data/china-provinces.geo.json"
    )
      .then((res) => res.json())
      .then((mapData) => {
        // 将 GeoJSON 数据转换成 G2 可绘制的的数据格式
        const mapDv = new DataView().source(mapData, {
          type: "GeoJSON",
        });
        const userDv = new DataView();
        // 筛选地图数据并添加 trendType 字段
        userDv
          .source(this.dataList)
          .transform({
            geoDataView: mapDv,
            field: "name",
            type: "geo.region",
            as: ["longitude", "latitude"],
          })
          .transform({
            type: "map",
            callback(obj) {
              obj.trendType = vm.getValueType(obj.value);
              return obj;
            },
          });

        this.chart.data(userDv.rows);
        // 重命名 
        this.chart.scale({
          trendType: {
            alias: "风险级别",
          },
          name: {
            alias: "省市",
          },
          value: {
            alias: "感染人数",
          },
        });
        // 不展示坐标系
        this.chart.axis(false);
        // 映射数据
        this.chart
          .polygon()
          .position("longitude*latitude")
          // 给定颜色
          .color("trendType",val=>{
            if(val == "无风险地区") return vm.colorSet[0];
            else if (val == "轻微风险地区") return vm.colorSet[1];
            else if (val == "低风险地区") return vm.colorSet[2];
            else if (val == "中风险地区") return vm.colorSet[3];
            else if (val == "高风险地区") return vm.colorSet[4];
            else if (val == "超高风险地区") return vm.colorSet[5];
            else if (val == "极度危险风险地区") return vm.colorSet[6];
          })
          .tooltip("name*trendType*value")
          // 图形绘制边线
          .style({
            fillOpacity: 0.85,
            stroke: "#ccc",
            lineWidth: 1,
          });
        // 修改交互 
        this.chart.interaction("legend-highlight");
        this.chart.interaction("element-highlight");
        this.chart.removeInteraction("legend-filter");
        this.chart.render();
      });
  },
  methods: {
    // 根据 value 返回所对应的类型
    getValueType(value) {
      if (value <= 0) {
        return "无风险地区";
      } else if (value <= 10) {
        return "轻微风险地区";
      } else if (value <= 100) {
        return "低风险地区";
      } else if (value <= 1000) {
        return "中风险地区";
      } else if (value <= 5000) {
        return "高风险地区";
      } else if (value <= 10000) {
        return "超高风险地区";
      } else {
        return "极度危险风险地区";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
}
</style>
